import React from 'react';
import './index.less';
import {Select} from 'antd';

const Option = Select.Option;


export default (props) => {
    const {active, selectLayout, setStyle, delComponent, itemConfig, customProps, selectLayoutCell, selectArea, style, zIndex, makeAreasList} = props;

    let list = [];
    
    if (itemConfig.areas === 'table') {
        list = makeAreasList(customProps); 
    }

    return (
        <div 
            className="layout-wrapper"
            style={{
                width: style.width + 'px',
                height: style.height + 'px',
                zIndex: zIndex
            }}
        >
            <div 
                className={`layout-tool-bar${active ? ' active' : ''}`}
                onClick={selectLayout}
            >
                <span
                    onClick={delComponent(itemConfig)}
                >
                    删除
                </span>
                <span
                    onClick={setStyle}
                >
                    设置
                </span>
                <span>
                    选择单元格：
                    <Select
                        style={{
                            width: 150
                        }}
                        value={selectLayoutCell}
                        onChange={selectArea}
                    >
                        {list.map((item) => {
                            return (
                                <Option
                                    value={item.value}
                                    key={item.value}
                                >
                                    {item.label}
                                </Option>
                            )
                        })}
                    </Select>
                </span>
            </div>
            {props.children}
        </div>
    );

}